<template>
  <div>
    <el-form :rules="rules" class="login-container" label-position="left" label-width="0px"
             v-loading="loading" :model="ruleForm" ref="ruleForm">
      <h2 class="login_title">宠物商城</h2>

      <el-form-item prop="name">
        <el-input type="text" v-model="ruleForm.name" auto-complete="off" placeholder="用户名"></el-input>
      </el-form-item>

      <el-form-item prop="pwd">
        <el-input type="password" v-model="ruleForm.pwd" auto-complete="off" placeholder="密码" show-password></el-input>
      </el-form-item>

      <el-checkbox class="login_remember" v-model="checked" label-position="left">记住密码</el-checkbox>

      <el-form-item style="width:99%">
        <el-button type="primary" round style="width:100%" @click="loginBtn('ruleForm')">登录</el-button>
      </el-form-item>

      <el-form-item style="width:99%;">
        <el-button type="success" round style="width:100%" @click="registerBtn()">我要注册</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
  import Cookies from 'js-cookie'

  const axios = require('axios')
  export default {
    data() {
      return {
        rules: {
          name: [{required: true, message: '用户名不能为空', trigger: 'blur'}],
          pwd: [{required: true, message: '密码不能为空', trigger: 'blur'}]
        },
        checked: true,
        ruleForm: {
          name: '',
          pwd: ''
        },
        loading: false
      }
    },
    methods: {
      loginBtn(formName) { // 登录 判断
        const _this = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            axios.post('http://localhost:9000/user/login', this.ruleForm).then(function (resp) {
              //console.log(resp)

              if (resp.data == 'success') {
                Cookies.set('loginName', _this.ruleForm.name)
                _this.$router.push('/home')
                _this.$message({
                  type: 'success',
                  message: '登录成功'
                })
              } else {
                _this.$message({
                  type: 'error',
                  message: '用户名或密码错误'
                })
              }
            })
          } else {
            return false;
          }
        });
      },
      registerBtn() { // 注册
        this.$router.push('/register')
      }
    }
  }
</script>

<style>
  /*html {
    background: #F8F8FF;
  }*/

  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 35px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }

  .login_remember {
    margin: 0px 0px 35px 0px;
    text-align: left;
  }
</style>
